<template>
	<view class="order">
		<view class="order_nav">
			<u-subsection :list="list" :current="current" activeColor="#884e22" fontSize="15" bgColor="#f1f1f1"
				inactiveColor="#000" @change="changeCurrent" class="subsection"></u-subsection>
		</view>
		<view class="order_cont">
			<view class="order_item" v-for="(item,i) in orderList" :key="i" @click="goOrderDetail(item.id)">
				<view class="item_top">
					<div class="order_num">订单号：{{item.order_id}}</div>
					<div class="order_status">{{getOrderStatus(item.status)}}</div>
				</view>
				<view class="item_cont">
					<view class="goods_item" v-for="(goods,i) in JSON.parse(item.goods_info)" :key="i">
						<view class="goods_left">
							<image :src="goods.s_goods_photos[0].path" mode="" class="goods_img"></image>
							<view class="goods_name">{{goods.goods_name}}</view>
						</view>
						<view class="goods_right">
							<view class="goods_price">￥{{goods.sale_price.toFixed(2)}}</view>
							<view class="goods_num">x{{goods.num}}</view>
						</view>
					</view>
				</view>
				<view class="item_bottom">
					<view class="disbursements" v-if="item.status !== '0' && item.status !== '1'">
						实付款：￥{{item.total_price}}
					</view>
					<view class="disbursements" v-if="item.status === '1'">
						需付款：￥{{item.total_price}}
					</view>
					<view class="btn" v-if="item.status === '1'" @click.stop="operateOrder(item.id,'是否取消订单','7')">取消订单
					</view>
					<view class="btn"
						v-if="item.status === '2' || item.status === '3' || item.status === '4' || item.status === '5'">
						查看物流
					</view>
					<view class="btn" v-if="current == 3">再次购买</view>
					<view class="btn"
						v-if="current != 3 && (item.status === '0' || item.status === '6' || item.status === '7')"
						@click.stop="operateOrder(item.id,'是否删除订单','-1')">
						删除订单
					</view>
					<view class="right btn" v-if="item.status === '1'" @click.stop="goPay(item.id,item.total_price)">去付款
					</view>
					<view class="right btn"
						v-if="item.status === '2' || item.status === '3' || item.status === '4' || item.status === '5'"
						@click.stop="operateOrder(item.id,'是否确认收货','6')">
						确认收货
					</view>
					<view class="right btn" v-if="current == 3">立即评价</view>
					<view class="right btn"
						v-if="current != 3 && (item.status === '0' || item.status === '6' || item.status === '7')">
						再次购买
					</view>
				</view>
			</view>
		</view>
		<u-modal :show="showModal" :title="title" :showCancelButton="true" width="500rpx" :closeOnClickOverlay="true"
			@cancel="close" @close="close" @confirm="confirm">
		</u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '全部'
				}, {
					name: '待付款'
				}, {
					name: '待收货'
				}, {
					name: '待评价'
				}, {
					name: '已完成'
				}],
				current: 0,
				// 全部订单数据
				allOrderList: [],
				// 需要渲染的订单
				orderList: [],
				showModal: false,
				title: '',
				status: '',
				// 确认收货Id
				receiptId: null
			};
		},
		computed: {

		},
		onLoad(options) {
			this.current = Number(options.current)
		},
		onShow() {
			this.getOrder()
		},
		methods: {
			getOrder() {
				// -1：已删除，1:已下单，2:已支付，3:已发货, 4:退货中，5:退款中，6:已完成，7：已取消
				uni.$http.get('/api/order', {
					project_id: 319,
					limit: 40,
					// 获取全部订单
					status: ''
				}).then(res => {
					this.allOrderList = res.data.result.rows
					this.showOrder()
				})
			},
			getOrderStatus(status) {
				switch (status) {
					case '0':
						return '交易关闭'
					case '1':
						return '已下单'
					case '2':
						return '已支付'
					case '3':
						return '已发货'
					case '4':
						return '退货中'
					case '5':
						return '退款中'
					case '6':
						return '交易成功'
					case '7':
						return '交易取消'
				}
			},
			showOrder() {
				if (this.current == 0) {
					// 删除的订单不渲染
					this.orderList = this.allOrderList.filter(ele => ele.status !== '-1')
				} else if (this.current == 1) {
					this.orderList = this.allOrderList.filter(ele => ele.status === '1')
				} else if (this.current == 2) {
					this.orderList = this.allOrderList.filter(ele => {
						return ele.status === '2' || ele.status === '3' || ele.status === '4' || ele.status === '5'
					})
				} else if (this.current == 3) {
					this.orderList = this.allOrderList.filter(ele => ele.status === '6')
				} else {
					this.orderList = this.allOrderList.filter(ele => ele.status === '6')
				}
			},
			changeCurrent(index) {
				this.current = index
				this.showOrder()
			},
			goPay(id, total) {
				uni.navigateTo({
					url: `/pay/pay?id=${id}&total=${total}`
				})
			},
			// 操作订单 -- 删除、确认收货
			operateOrder(id, title, status) {
				this.showModal = true
				this.receiptId = id
				this.title = title
				this.status = status
			},
			// 模态框 -- 取消
			close() {
				this.showModal = false
				this.receiptId = null
			},
			// 模态框 -- 确认
			confirm() {
				uni.$http.put(`/api/order/${this.receiptId}`, {
					status: this.status
				}).then(res => {
					this.close()
					this.getOrder()
				})
			},
			goOrderDetail(id) {
				uni.navigateTo({
					url: `/order/orderDetail?id=${id}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		// height: 100vh;
		background-color: #f1f1f1;

		.order_nav {
			.subsection {
				position: fixed;
				top: 44px;
				left: 0;
				z-index: 999;
			}
		}

		.order_cont {
			display: flex;
			flex-direction: column;
			padding: 10px;

			.order_item {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				border-radius: 7px;
				margin-bottom: 10px;
				font-size: 13px;

				.item_top {
					display: flex;
					justify-content: space-between;
					padding: 10px;
				}

				.item_cont {
					display: flex;
					flex-direction: column;
					background-color: #F7F9FA;
					padding-bottom: 10px;

					.goods_item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 10px 10px 0;

						.goods_left {
							display: flex;
							align-items: center;

							.goods_img {
								width: 70px;
								height: 70px;
								margin-right: 10px;
							}
						}

						.goods_right {
							display: flex;
							flex-direction: column;
							align-items: flex-end;

							.goods_price {
								font-weight: 600;
								font-size: 14px;
								color: #884e22;
							}

							.goods_num {
								font-size: 12px;
								margin-top: 5px;
								color: #888;
							}
						}
					}
				}

				.item_bottom {
					display: flex;
					justify-content: flex-end;
					align-items: center;
					padding: 10px;

					.disbursements {
						flex-grow: 1;
					}

					.btn {
						padding: 2px 7px;
						border: 0.5px solid #000;
						border-radius: 15px;
						margin-left: 10px;
					}

					.right {
						color: #884e22;
						border: 0.5px solid #884e22;
					}
				}
			}
		}
	}
</style>